<template>
	<div class="app-container2">
		<el-form
			ref="form"
			:model="ruleForm"
			label-width="100px"
			:inline="true"
		>
			<el-form-item label="组织名称:">
				<el-input v-model="value"></el-input>
			</el-form-item>
			<el-form-item label="组织类别:">
				<el-select v-model="value" placeholder="请选择">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<div
			style="
				margin-bottom: 24px;
				display: flex;
				justify-content: space-between;
			"
		>
			<div style="display: flex; align-items: center">
				<el-button type="danger" size="mini">组织架构</el-button>
				<el-button
					size="mini"
					icon="el-icon-plus"
					@click="
						;(title = '新增组织'),
							(form.status = 1),
							(dialogVisible = true)
					"
					>新增</el-button
				>
				<el-button icon="el-icon-upload2" size="mini">导入</el-button>
				<el-button icon="el-icon-download" size="mini">导出</el-button>
			</div>
			<div style="display: flex; align-items: center">
				<el-button @click="" size="mini">重置</el-button>
				<el-button type="danger" size="mini">查询</el-button>
			</div>
		</div>
		<el-table
			:data="list"
			style="width: 100%"
			v-loading="loading"
			row-key="id"
			:tree-props="{ children: 'childlist', hasChildren: 'hasChildren' }"
			:expand-row-keys="expands"
		>
			<el-table-column
				prop="name"
				label="组织名称"
				align="left"
				width="300"
			>
			</el-table-column>
			<el-table-column
				prop="nickname"
				label="组织简称"
				align="center"
				width="250"
			>
			</el-table-column>
			<el-table-column label="组织类别" align="center">
				<template slot-scope="{ row }">{{
					getName(row.typeid, tissueTypeList)
				}}</template>
			</el-table-column>
			<el-table-column prop="foundtime" label="成立时间" align="center">
			</el-table-column>
			<el-table-column label="所在单位情况" align="center" width="150">
				<template slot-scope="{ row }">{{
					getName(row.unittype, unitList)
				}}</template>
			</el-table-column>
			<el-table-column prop="location" label="位置" align="center">
			</el-table-column>
			<el-table-column label="所属单位" align="center">
				<template slot-scope="{ row }">{{
					getName(row.unitid, unitsList, 'unitname')
				}}</template>
			</el-table-column>
			<el-table-column prop="date" label="状态" align="center">
				<template slot-scope="{ row }">
					<el-tag :type="row.status ? 'success' : 'danger'"
						>{{ row.status ? '可' : '不可' }}用</el-tag
					>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" width="240">
				<template slot-scope="{ row }">
					<div style="display: flex; justify-content: center">
						<el-button type="text" @click="handleItem(1, row)"
							>新增下级</el-button
						>
						<el-button type="text" @click="handleItem(2, row)"
							>编辑</el-button
						>
						<el-button type="text" @click="handleItem(3, row)"
							>{{ row.status ? '禁' : '启' }}用</el-button
						>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="720px"
			@close="cancelForm('form')"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-width="110px"
				class="form"
				inline
			>
				<el-form-item label="组织名称" prop="name">
					<el-input
						v-model="form.name"
						placeholder="请输入组织名称"
					></el-input>
				</el-form-item>
				<el-form-item label="组织简称" prop="nickname">
					<el-input
						v-model="form.nickname"
						placeholder="请输入组织简称"
					></el-input>
				</el-form-item>
				<el-form-item label="组织类别" prop="typeid">
					<el-select
						v-model="form.typeid"
						clearable
						placeholder="请选择组织类别"
					>
						<el-option
							v-for="item in tissueTypeList"
							:key="item.id"
							:label="item.configname"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="成立时间" prop="foundtime">
					<el-date-picker
						v-model="form.foundtime"
						type="date"
						placeholder="请选择成立时间"
						format="yyyy-MM-dd"
						value-format="yyyy-MM-dd"
						:picker-options="pickerOptions"
					>
					</el-date-picker>
				</el-form-item>
				<el-form-item label="所在单位情况" prop="unittype">
					<el-select
						v-model="form.unittype"
						clearable
						placeholder="请选择所在单位情况"
					>
						<el-option
							v-for="item in unitList"
							:key="item.id"
							:label="item.configname"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="位置" prop="location">
					<el-input
						v-model="form.location"
						placeholder="请输入位置"
					></el-input>
				</el-form-item>
				<el-form-item label="所属单位" prop="unitid">
					<el-select
						v-model="form.unitid"
						clearable
						placeholder="请选择位置所属单位"
					>
						<el-option
							v-for="item in unitsList"
							:key="item.id"
							:label="item.unitname"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="状态" prop="status">
					<el-select v-model="form.status" placeholder="请选择状态">
						<el-option label="可用" :value="1"></el-option>
						<el-option label="不可用" :value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上级" v-if="form.pid">
					<el-input
						v-model="form.pname"
						placeholder="请选择"
						disabled
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelForm('form')">取 消</el-button>
				<el-button
					:disabled="btnLoading"
					type="primary"
					@click="submitForm('form')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	listTissue,
	addTissue,
	editTissue,
	deleteTissue,
	openTissue,
	parentlist,
} from '@/api/tissue'
import { getConfigList, getUnitList } from '@/api/setting'
export default {
	data() {
		return {
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now()
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date())
						},
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24)
							picker.$emit('pick', date)
						},
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', date)
						},
					},
				],
			},
			title: '',
			btnLoading: false,
			loading: false,
			value: '',
			dialogVisible: false,
			list: [],
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				type: [],
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入组织名称',
						trigger: 'blur',
					},
				],
				nickname: [
					{
						required: true,
						message: '请输入组织简称',
						trigger: 'blur',
					},
				],
				typeid: [
					{
						required: true,
						message: '请选择组织类别',
						trigger: 'change',
					},
				],
				unittype: [
					{
						required: true,
						message: '请选择所在单位情况',
						trigger: 'change',
					},
				],
			},
			form: {
				id: null,
				name: '',
				nickname: '',
				typeid: '',
				foundtime: '',
				unittype: '',
				location: '',
				unitid: '',
				pid: '',
				status: 1,
				pname: '',
			},
			expands: [],
			options: [],
			tissueTypeList: [], //组织类别列表
			unitList: [], //所在单位列表
			unitsList: [], //单位信息
		}
	},
	methods: {
		handleItem(type, item) {
			if (type == 1) {
				this.form.status = 1
				this.form.pid = item.id
				this.form.pname = item.name
				this.title = '新增组织'
				this.dialogVisible = true
			} else if (type == 2) {
				this.title = '编辑组织'
				let {
					id,
					name,
					nickname,
					typeid,
					foundtime,
					unittype,
					location,
					unitid,
					pid,
					status,
				} = item
				this.form = {
					id,
					name,
					nickname,
					typeid,
					foundtime,
					unittype,
					location,
					unitid,
					pid,
					status,
				}

				this.dialogVisible = true
			} else {
				let api = item.status
					? deleteTissue({ id: item.id })
					: openTissue({ id: item.id })
				api.then((res) => {
					this.$modal.msgSuccess(res.msg)
					this.getList()
				})
			}
		},
		//新增、编辑
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.btnLoading = true
					let api = this.form.id
						? editTissue(this.form)
						: addTissue(this.form)
					api.then((res) => {
						this.btnLoading = false
						this.dialogVisible = false
						this.ruleForm.pageNum = 1
						this.$modal.msgSuccess(res.msg)
						this.getList()
					}).catch(() => {
						this.btnLoading = false
					})
				} else {
					return false
				}
			})
		},
		getList() {
			parentlist(this.ruleForm).then((res) => {
				this.list = res.data
				this.expands = []
				if (res.data.length) this.expands.push(String(res.data[0].id))
				this.loading = false
			})
		},
		// 获取配置信息
		getConfigList() {
			getConfigList({ configflag: 'dangzuzhileibie' }).then((res) => {
				this.tissueTypeList = res.data
			})
			getConfigList({ configflag: 'suozaidanweiqingkuang' }).then(
				(res) => {
					this.unitList = res.data
				}
			)
			getUnitList({ unitstatus: 1 }).then((res) => {
				this.unitsList = res.data
			})
		},
	},
	created() {
		this.getList()
		this.getConfigList()
	},
}
</script>

<style lang="scss" scoped>
::v-deep .form .el-form-item__content {
	width: 220px;
}
</style>
